<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head> 
  <meta charset="UTF-8"> 
<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 重置文件 --> 
  <link rel="stylesheet" href="css/normalize.css"> 
  <link rel="stylesheet" href="css/style1.css">
  <title>注册</title> 
 </head> 
 <body> 
  <div class="reg_div"> 
   <p>注册</p> 
   <ul class="reg_ul"> 
    <li> <span>用户名：</span> <input type="text" name="" value="" placeholder="4-8位用户名" class="reg_user"> <span class="tip user_hint"></span> </li> 
    <li> <span>密码：</span> <input type="password" name="" value="" placeholder="6-16位密码" class="reg_password"> <span class="tip password_hint"></span> </li> 
    <li> <span>确认密码：</span> <input type="password" name="" value="" placeholder="确认密码" class="reg_confirm"> <span class="tip confirm_hint"></span> </li> 
<!--    <li> <span>邮箱：</span> <input type="text" name="" value="" placeholder="邮箱" class="reg_email"> <span class="tip email_hint"></span> </li> -->
    <li> <span>手机号码：</span> <input type="text" name="" id="phone" value="" placeholder="手机号" class="reg_mobile"> <span class="tip mobile_hint"></span> </li>
    <li>
     <span>验证码：</span> <input type="text" name="auth" value="" placeholder="验证码" class="reg_auth" style="width: 110px"> <span class="tip mobile_hint"></span>
     <div style="padding-top: 10px">
      <a href="#" style="margin-left: -160px" id="sendCode">发送验证码</a>
     </div>
    </li>
    <li> <button type="button" name="button" class="red_button">注册</button> </li>
   </ul> 
  </div> 
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <script>
   $(function(){
     $("#sendCode").click(function(){
      if ($(this).hasClass("disabled")){
        //正在倒计时
      }else{
       //1.给指定的手机号发验证码
       $.get("/smsCode?phone="+$("#phone").val(),function(data){
           if(data.code != 0){
             alert(data.msg);
           }
       });
       timeoutChangeStyle();
      }
     });
   });
   var num = 30;
   function timeoutChangeStyle(){
    $("#sendCode").attr("class","disabled");
    if (num==0){
     $("#sendCode").text("发送验证码");
     num = 30;
     $("#sendCode").attr("class","");
    }else{
     var str = num + "s 后再次发生";
     $("#sendCode").text(str);
     setTimeout("timeoutChangeStyle()",1000);
    }
    num--;
   }
  </script>
 </body>
</html>